<template>
    <div class="user-header">
        <el-button type="primary" @click="handleAdd">+新增</el-button>
        <el-form :inline="true" :model="formInline">
            <el-form-item label="请输入">
                <el-input v-model="formInline.keyword" placeholder="请输入用户名" clearable />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="handleSearch">搜索</el-button>
            </el-form-item>
        </el-form>
    </div>

    <div class="table">
        <el-table :data="list" style="width: 100%;height: 600px">

            <el-table-column v-for="item in tableLabel" :key="item.prop" :prop="item.prop" :label="item.label"
                :width="item.width ? item.width : 125" />

            <el-table-column fixed="right" label="操作" width="180">
                <template #default="scope">
                    <el-button type="primary" size="small" @click="handleEdit(scope.row)">编辑</el-button>
                    <el-button type="danger" size="small" @click="handleDelete(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-pagination small background layout="prev, pager, next" :total="config.total" @current-change="changePage"
            class="pager mt-4" />
    </div>

    <el-dialog v-model="dialogVisible" :title="action === 'add' ? '新增用户' : '编辑用户'" width="35%"
        :before-close="handleClose">

        <el-form :model="formUser" :inline="true" ref="userForm">
            <el-row>
                <el-col :span="12">
                    <el-form-item label="姓名" prop="name" :rules="[{ required: true, message: '姓名是必填项' }]">
                        <el-input v-model="formUser.name" placeholder="请输入用户名" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="年龄" prop="age"
                        :rules="[{ required: true, message: '年龄是必填项' }, { type: 'number', message: '年龄必须是数字' }]">
                        <el-input v-model.number="formUser.age" placeholder="请输入年龄" />
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="12">
                    <el-form-item label="性别" prop="sex" :rules="[{ required: true, message: '性别是必选项' }]">
                        <el-select v-model="formUser.sex" placeholder="请选择" clearable style="width: 140px;">
                            <el-option label="男" value=1 />
                            <el-option label="女" value=0 />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="出生日期" prop="birth" :rules="[{ required: true, message: '性别是必选项' }]">
                        <el-date-picker v-model="formUser.birth" type="date" placeholder="请选择" clearable />
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="12">
                    <el-form-item label="地址" prop="addr" :rules="[{ required: true, message: '地址是必选项' }]">
                        <el-input v-model="formUser.addr" placeholder="请输入地址" />
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row style="justify-content: flex-end;">
                <el-form-item>
                    <el-button type="primary" @click="handleCancel">取消</el-button>
                    <el-button type="primary" @click="onSubmit">确定</el-button>
                </el-form-item>
            </el-row>
        </el-form>
        <!-- <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="dialogVisible = false">
                    确定
                </el-button>
            </div>
        </template> -->
    </el-dialog>
</template>

<script setup>

import { getCurrentInstance, onMounted, reactive, ref } from 'vue';

const { proxy } = getCurrentInstance();
const list = ref([]);
const tableLabel = reactive([
    {
        prop: "name",
        label: "姓名",
    },
    {
        prop: "age",
        label: "年龄",
    },
    {
        prop: "sexLabel",
        label: "性别",
    },
    {
        prop: "birth",
        label: "出生日期",
        width: 200,
    },
    {
        prop: "addr",
        label: "地址",
        width: 320,
    }
]);
onMounted(() => {
    getUserData(config);
});
const config = reactive({
    total: 0,
    page: 1,
    name: '',
});
const getUserData = async (config) => {
    let res = await proxy.$api.getUserData(config);

    config.total = res.count;

    list.value = res.list.map((item) => {
        item.sexLabel = item.sex === 0 ? '女' : '男';
        return item;
    });
};
const changePage = (page) => {
    // console.log(page);
    config.page = page;
    getUserData(config);
};
const formInline = reactive({
    keyword: "",
});
const handleSearch = () => {
    config.name = formInline.keyword;
    getUserData(config);
};
// 控制模拟态框的显示隐藏
const dialogVisible = ref(false);
const handleClose = (done) => {
    ElMessageBox.confirm('确定要关闭吗?')
        .then(() => {
            proxy.$refs.userForm.resetFields();
            done()
        })
        .catch(() => {
            // catch error
        })
};
// 取消
const handleCancel = () => {
    dialogVisible.value = false;
    proxy.$refs.userForm.resetFields();
};
// 添加用户的 form 数据
const formUser = reactive({
    name: "",
    age: "",
    sex: undefined,
    addr: "",
    birth: "",
});
// 时间格式化
const timeFormat = (time) => {
    var time = new Date(time);
    var year = time.getFullYear();
    var month = time.getMonth() + 1;
    var date = time.getDate();
    function add(m) {
        return m < 10 ? "0" + m : m;
    }
    return year + "-" + add(month) + "-" + add(date);
};
// 新增用户
const handleAdd = () => {
    action.value = 'add';
    dialogVisible.value = true;
}
// 添加用户 或 编辑用户
const onSubmit = async () => {
    proxy.$refs.userForm.validate(async (valid) => {
        if (valid) {
            if(action.value == 'add'){
                formUser.birth = timeFormat(formUser.birth);
                let res = await proxy.$api.addUser(formUser);
                // console.log(res);
                if (res) {
                    dialogVisible.value = false;
                    proxy.$refs.userForm.resetFields();
                    getUserData(config);
                }
            }else if(action.value == 'edit'){
                formUser.sex == "男" ? (formUser.sex = 1) : (formUser.sex = 0);
                // 编辑接口
                let res = await proxy.$api.editUser(formUser);
                if (res) {
                    dialogVisible.value = false;
                    proxy.$refs.userForm.resetFields();
                    getUserData(config);
                }
            }
        } else {
            ElMessage({
                showClose: true,
                message: "请输入正确内容",
                type: "error",
            })
        }
    })
};
// 区分编辑和新增
const action = ref('add');
// 编辑用户
const handleEdit = (row) => {
    // console.log(row);
    action.value = 'edit';
    dialogVisible.value = true;

    row.sex == 1 ? (row.sex = "男") : (row.sex = "女");
    proxy.$nextTick(() => {
        // 浅拷贝
        Object.assign(formUser, row);
    });
};
// 删除用户
const handleDelete = (row) => {
    ElMessageBox.confirm('确定要删除吗?')
        .then(async () => {
            await proxy.$api.deleteUser({
                id: row.id
            });
            ElMessage({
                showClose: true,
                message: "删除成功",
                type: "success",
            });
            getUserData(config);
            done();
        })
        .catch(() => {
            // catch error
        })
}
</script>

<style lang="less" scoped>
.table {
    position: relative;
    height: 620px;

    .pager {
        position: absolute;
        right: 0;
        bottom: -20px;
    }
}

.user-header {
    display: flex;
    justify-content: space-between;
}
</style>